<template>
  <div class="app-container customer-div">
    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="收款日期：">
          <el-date-picker
                  v-model="listQuery.payDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单编号：">
          <el-input v-model="listQuery.orderSn"></el-input>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-autocomplete
                  clearable
                  class="inline-input"
                  value-key="customerName"
                  :fetch-suggestions="querySearch"
                  v-model="listQuery.customerName"
                  placeholder="请输入内容"
                  @select="handleSelectCustomerName"
                  :trigger-on-focus="false"
                  style="width: 270px;"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="操作人：">
          <el-select v-model="listQuery.operatorId" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="listQuery.payState" class="input-width" style="width:195px" placeholder="请选择" clearable multiple>
            <el-option :value="1" label="未结清" :key="1"></el-option>
            <el-option :value="2" label="已结清" :key="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为定金：">
          <el-select v-model="listQuery.isDeposit" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="1" label="是" :key="1"></el-option>
            <el-option :value="0" label="否" :key="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
          <el-button
            :loading="btnLoading"
            @click="downloadExcel()"
            type="primary">
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>

      <!--数据列表-->
    <div style="font-size:14px;line-height: 30px;padding:10px 0 ">
      合计收款金额：<span style="font-weight: bold">{{ receiveAllAmount }}</span>
    </div>
      <div class="table-container">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column  label="订单编号" width="140" align="center" prop="orderSn">
            <template slot-scope="scope">
              <div>
                <el-link @click="toOrderDetail(scope.row.orderId)" type="primary" style="font-size:12px">
                  {{scope.row.orderSn}}
                </el-link>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="客户名称"
            width="300">
            <template slot-scope="scope">
                {{scope.row.customerName}}
            </template>
          </el-table-column>
          <el-table-column
                  label="应收金额"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.goodsAmount}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="payTime"
            label="收款日期"
            width="150">
          </el-table-column>
          <el-table-column
            prop="payType"
            label="收款方式"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            label="收款金额"
            width="100"
            align="center">
            <template slot-scope="scope">
                {{scope.row.payAmount}}
            </template>
          </el-table-column>

<!--          <el-table-column-->
<!--            label="是否为定金"-->
<!--            width="100"-->
<!--            align="center">-->
<!--            <template slot-scope="scope">-->
<!--              {{scope.row.isDeposit == 1 ? '是' : '否'}}-->
<!--            </template>-->
<!--          </el-table-column>-->

          <el-table-column
            label="交易方式"
            width="200"
            align="center">
            <template slot-scope="scope">
              {{scope.row.orderRemark}}
            </template>
          </el-table-column>

          <el-table-column
                  label="订单支付状态"
                  width="100"
                  align="center">
            <template slot-scope="scope">
                {{scope.row.payState | fiferPayState}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作人"
            width="120"
            align="center">
            <template slot-scope="scope">
              <span style="color:red">
                 {{scope.row.operator}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
                  label="备注"
                  width="300">
            <template slot-scope="scope">
              {{scope.row.remark}}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="showDialog(scope.row)">查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

    <!--放大图片-->
    <el-dialog
            :visible.sync="dialogVisible5"
            width="800">
      <img :src="priceForm.payContent" style="width:100%"/>
    </el-dialog>

    <!--查看收款-->
    <el-dialog
            :close-on-click-modal="false"
            title="增加收款"
            :visible.sync="dialogVisible"
            width="540px">
      <el-form :model="priceForm" size="mini" label-width="110px"  ref="priceForm">
          <el-form-item label="付款帐户：">
              {{priceForm.payAccount}}
          </el-form-item>
          <el-form-item label="收款方式：">
              {{priceForm.payType}}
          </el-form-item>
          <el-form-item label="收款银行帐号：">
            {{priceForm.receiveAccountName}}<span v-if="priceForm.receiveAccountNo != ''">【{{priceForm.receiveAccountNo}}】</span>
          </el-form-item>
          <el-form-item label="应收票据：">
            {{priceForm.document}}
          </el-form-item>
          <el-form-item label="凭证：">
            <div style="width: 100%;height: 150px; border:1px solid #DCDFE6;cursor: default;border-radius: 4px;">
              <img id="imgNode" :src="priceForm.payContent" style="width:100%;height:100%;object-fit: contain;border:0" @click="dialogVisible5=true">
            </div>
          </el-form-item>
          <el-form-item label="收款金额：">
            ￥{{priceForm.payAmount}}
          </el-form-item>
        <el-form-item label="是否为定金：">
          {{priceForm.isDeposit == 1 ? '是' : '否'}}
        </el-form-item>
        <el-form-item label="备注：">
          {{priceForm.remark}}
        </el-form-item>
          <div style="text-align: center">
            <el-button
                    type="primary"
                    size="mini"
                    @click="cancelRow">取消收款
            </el-button>
          </div>

      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import {getCustomerOption,saleOrderList,getOrderUsersList,getFinanceOrderDetailList,getPayDetail,cancelPay} from '@/api/partner'

    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
  import {capitalCostList} from "../../api/partner";
    const defaultListQuery={
      orderSn:'',
      userId:null,
      createDate:null,
      customerName: '',
      payDate:null,
      payState:null,
      operatorId:null,
      isDeposit:'',
      pageNum: 1,
      pageSize: 10,
    };
    const defaultPriceForm={
      orderId:'',
      payAccount : '',
      payType:'银行汇款',
      payAmount:'',
      payContent:'',
      remark:'',
      unPaidAmount:'',
      isDeposit:'',
      receiveAccountName:'',
      receiveAccountNo:'',
      document:''
    };
    export default {
      name: "index",
      data(){
          return {
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData: [],
              count: 0,
              listLoading: false,
              userOptionList:[],
              roles:store.getters.roles ? store.getters.roles : [],

              dialogVisible:false,
              priceForm:JSON.parse(JSON.stringify(defaultPriceForm)),
              btnLoading : false,
              dialogVisible5:false,
              receiveAllAmount:''

          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),
        isCanCustomerByAll(){
          if(this.roles.indexOf("customerByAll") != -1){
            return true
          }else{
            return false
          }
        },
      },
      created() {
        this.listQuery.orderSn = this.$route.query.orderSn;
          let time = new Date();
          let day = time - time % (24 * 60 * 60 * 1000) - 8 * 60 * 60 * 1000;
          let end = new Date(day + 24 * 60 * 60 * 1000-1000);
          let start = new Date(day - 7*24 * 60 * 60 * 1000);
          let endDate = formatDate(end, 'yyyy-MM-dd');
          let startDate = formatDate(start, 'yyyy-MM-dd');
          this.listQuery.payDate = [startDate,endDate];
          this.getList();
          this.getUserOptionList();
      },
      filters: {
        formatCreateTime(time) {
          if(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
          }else{
            return '--'
          }
        },
        fiferPayState(val){
          if(val == 0){
            return '--'
          }else if(val == 1){
            return '未结清'
          }else if(val == 2){
            return '已结清'
          }
        },
      },
      methods:{
        //下载excle
        downloadExcel(){
          let params = JSON.parse(JSON.stringify(this.listQuery));
          params.isExport = 1;
          delete params.pageNum;
          delete params.pageSize;
          this.btnLoading = true;
          getFinanceOrderDetailList(params).then((res)=>{
            this.btnLoading = false;
            require.ensure([], () => {
              const { export_json_to_excel } = require('sheet/Export2Excel');
              const tHeader = res.title;
              const filterVal = res.columns;
              const list = res.list;
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, res.fileName);
            })
          }).catch(()=>{
            this.btnLoading = false;
          })
        },

        //下载表格数据格式化
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        },

          toOrderDetail(orderId){
              let routeData = this.$router.resolve({name:'purchaseDetail',query:{id:orderId,type:'see',seeType:'caiWu'}});
              window.open(routeData.href);
          },
        //取消
        cancelRow(){
          this.$confirm('是否确定取消', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            cancelPay({payId:this.priceForm.payId}).then(()=>{
              this.dialogVisible = false;
              this.getList();
              this.$message({
                type: 'success',
                message: '操作成功!'
              });

            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        },
        //显示收款弹窗
        showDialog(item){
            this.dialogVisible = true;
            this.priceForm = JSON.parse(JSON.stringify(defaultPriceForm));
            this.priceForm.payAccount = item.customerName;
            this.priceForm.payAmount = item.payAmount;
            this.priceForm.payContent = item.payContent;
            this.priceForm.remark = item.remark;
            this.priceForm.payType = item.payType;
            this.priceForm.payId = item.payId;
            this.priceForm.isDeposit = item.isDeposit;
            this.priceForm.receiveAccountName = item.receiveAccountName;
            this.priceForm.receiveAccountNo = item.receiveAccountNo;
            this.priceForm.document = item.document

        },

          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
                  this.userOptionList = res;
              })
          },

          //选择员工名称
          handleSelectUserName(key,item){
              this.listQuery[key] = item.userId;
          },

          //客户名称输入匹配
          querySearch(queryString, cb){
              getCustomerOption({keywords:queryString}).then((res)=>{
                  cb(res);
              })
          },

          //选择客户名称
          handleSelectCustomerName(item){
              this.listQuery.keywords = item.customerName
          },

        handleSizeChange(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val){
          this.listQuery.pageNum = val;
          this.getList();
        },

        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getList();
        },

        //获取订单列表
        getList() {
          this.listLoading = true;
          getFinanceOrderDetailList(this.listQuery).then(response => {
            this.tableData = response.list;
            this.count = response.count;
            this.receiveAllAmount = response.receiveAllAmount
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          });
        },
      },
    }
</script>

<style scoped lang="scss">
  .upload-div{
    text-align: center;
    position:relative;
    #upload{

      opacity: 0;
      position: absolute;
      z-index: 1;
      width:154px;
      height:40px
    }
  }
</style>
